<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>补充去过的地区信息</title>
    <script src="plugins/common/common-js.js" type="text/javascript"></script>
    <script src="plugins/js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="plugins/js/jquery-citys.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/user_information.css">
</head>

<body>
    <div id="app" v-cloak>
        <el-container>
            <el-header height="70px">
                <el-row type="flex" justify="center">
                    <el-col :span="7">
                        <span>欢迎使用传染病接触自查系统，身份证为:</span>
                    </el-col>
                    <el-col :span="4">
                        <span>{{ this.userCookie.idCard }}</span>
                    </el-col>
                    <el-col :span="2">
                        <span>的用户</span>
                    </el-col>

                </el-row>
                <el-row type="flex" v-show="vshow.userShow">
                    <el-col :span="4" :offset="21">
                        <el-button icon="el-icon-delete" circle @click="clearUser()"></el-button>
                        <span>清除个人信息</span>
                    </el-col>
                </el-row>
            </el-header>
        </el-container>
        <el-container>
            <el-aside style="width:200px; background-color:#545c64">
                <el-menu default-active="userArea" class="el-menu-vertical-demo" background-color="#545c64"
                    text-color="#fff" active-text-color="#ffd04b" @select="selectPage">
                    <el-menu-item index="index">
                        <i class="el-icon-location"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item index="userMsg">
                        <i class="el-icon-setting"></i>
                        <span slot="title">完善个人信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">求助</span>
                    </el-menu-item>
                    <el-menu-item index="userArea">
                        <i class="el-icon-menu"></i>
                        <span slot="title">疫情期间去过的地区</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main v-loading="vshow.loading">
                <el-row type="flex" justify="center" v-show="vshow.showButton">
                    <el-form :inline="true" :model="user" ref="user" :rules="rules" label-width="80px">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="user.name"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" prop="idCard">
                            <el-input v-model="user.idCard"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" circle @click="searchMsg('user')"></el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-row v-show="vshow.showMsg">
                    <el-row>
                        <el-row type="flex" justify="center">
                            <span>补充疫情期间去过的地区</span>
                        </el-row>
                        <el-row>
                            <el-col :span="3" :offset="6">
                                <span>地区所在的城市：</span>
                            </el-col>
                            <el-col :span="10">
                                <div class="citys" id="citys">
                                    <select class="city-select" id="province" name="province"></select>
                                    <select class="city-select" id="city" name="city"></select>
                                    <select class="city-select" id="area" name="area"></select>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3" :offset="6">
                                <span>具体地址:</span>
                            </el-col>

                            <el-col :span="8">
                                <el-input id="xqAddress" placeholder="具体地址" v-model="areaData.xqAddress"></el-input>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="1" :offset="6">
                                <span>从:</span>
                            </el-col>
                            <el-col :span="5">

                                <el-date-picker placeholder="选择到达时刻" type="datetime" format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm" v-model="areaData.reachTime">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="1">
                                <span>到:</span>
                            </el-col>
                            <el-col :span="5">
                                <el-date-picker placeholder="选择离去时刻" type="datetime" format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm" v-model="areaData.leaveTime">
                                </el-date-picker>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="2" :offset="6">
                                <span>戴口罩情况</span>
                            </el-col>
                            <el-col :span="3">
                                <el-select v-model="areaData.kzqk" placeholder="请选择">
                                    <el-option v-for="item in kzlx" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2" :offset="1">
                                <span>环境状况</span>
                            </el-col>
                            <el-col :span="3">
                                <el-select v-model="areaData.tfqk" placeholder="请选择">
                                    <el-option v-for="item in tongfeng" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="center">
                            <el-col :span="2">
                                <el-button type="submit" @click="newArea">提交</el-button>
                            </el-col>
                        </el-row>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="14">
                            <el-table :data="areaTable" stripe>
                                <el-table-column label="地区" width="200" prop="addressName"
                                    :show-overflow-tooltip='true'>
                                </el-table-column>
                                <el-table-column label="详细地址" width="160" prop="xqAddress"
                                    :show-overflow-tooltip='true'>
                                </el-table-column>
                                <el-table-column label="到达时刻" width="165" prop="reachTime"
                                    :show-overflow-tooltip='true'>
                                </el-table-column>
                                <el-table-column label="离去时刻" width="165" prop="leaveTime"
                                    :show-overflow-tooltip='true'></el-table-column>
                            </el-table>
                            <el-pagination background layout="prev, pager, next" :total="countNum.reachCount"
                                :page-size="pagesize" @current-change="handleAreaCurrentChange">
                            </el-pagination>
                        </el-col>
                    </el-row>
            </el-main>
        </el-container>
    </div>

    <script src="js/userArea.js" type="text/javascript"></script>
</body>


</html>